<template>
  <el-menu active-text-color="#ffd04b" background-color="#545c64" class="el-menu-vertical-demo" default-active="2"
           text-color="#fff" router>
    <!--    <el-sub-menu index="1">-->
    <!--      <template #title>-->
    <!--        <el-icon>-->
    <!--          <location/>-->
    <!--        </el-icon>-->
    <!--        <span>权限管理</span>-->
    <!--      </template>-->
    <!--      <el-menu-item-group>-->
    <!--        <el-menu-item index="/user">用户管理</el-menu-item>-->
    <!--        <el-menu-item index="/role">角色管理</el-menu-item>-->
    <!--        <el-menu-item index="/menu">菜单管理</el-menu-item>-->
    <!--      </el-menu-item-group>-->

    <!--    </el-sub-menu>-->

    <!--    <el-sub-menu index="2">-->
    <!--      <template #title>-->
    <!--        <el-icon>-->
    <!--          <Timer color="#FF00FF"/>-->
    <!--        </el-icon>-->
    <!--        <span>入住管理</span>-->
    <!--      </template>-->
    <!--      <el-menu-item index="2-1">客户入住</el-menu-item>-->
    <!--      <el-menu-item index="2-2">客户退住</el-menu-item>-->

    <!--    </el-sub-menu>-->


    <el-sub-menu v-for="menu in  permissions" :index="menu.menuId+''">
      <template #title>
        <el-icon>
          <component :is="menu.icon"/>
        </el-icon>
        <span>{{ menu.menuName }}</span>
      </template>
      <el-menu-item-group v-if="menu.children">
        <div v-for="child in menu.children">
          <el-menu-item :index="child.path">
            <el-icon>
              <component :is="child.icon"/>
            </el-icon>
            {{ child.menuName }}
          </el-menu-item>
        </div>
      </el-menu-item-group>
    </el-sub-menu>

  </el-menu>
</template>

<script setup name='NavMenu'>
import {getPermissions} from '@/utils/auth.js'

//获取pinia 框架中存储的用户  权限（菜单  父子关系）
const permissions = getPermissions()
// console.log("======加载用户权限用于生成菜单 ======")
// console.log(permissions)
// console.log("======加载用户权限用于生成菜单 ======")

</script>

<style scoped></style>